<template>
  <div class="page">
    <h2>示例 - 复选框</h2>
    <vue-tabulation
      ref="grid"
      :dataSource="dataSource"
      :columns="columns"
      :height="500"
      :hasIndex="true"
      :hasCheckbox="true"
      @selection-change="handleSelectionChange"
      @row-click="rowclick"
    ></vue-tabulation>
    <hr />
    <button @click="toggleSpecifyRow">切换第3，6 行的选中状态</button>
    <button @click="checkSpecifyRow">选中第3，6 行的选中状态</button>
    <button @click="$refs.grid.selectionAllToggle(false)">复选框清除</button>
    <button @click="$refs.grid.selectionAllToggle(true)">复选框全选</button>
    <button @click="$refs.grid.selectionAllToggle()">复选框toggle</button>
  </div>
</template>

<script>
export default {
  name: 'demo-selection',
  data() {
    return {
      dataSource: this.$mock.dataSource(50),
      columns: this.$mock.columns(),
    }
  },
  methods: {
    handleSelectionChange(rows) {
      console.log(rows)
    },
    toggleSpecifyRow() {
      this.$refs.grid.selectionToggle([2, 5])
    },
    checkSpecifyRow() {
      this.$refs.grid.selectionToggle([2, 5], true)
    },
    rowclick(index) {
      // console.log('rowclick', arguments)
      this.$refs.grid.selectionToggle([index])
    },
  },
}
</script>
